import "./posts.scss"
interface PageProps {
  params: {
    id: string;
  };
}

export default async function PostDetail({ params }: PageProps) {
  const { id } = params;

  try {
    // 获取文章详情
    const res = await fetch(`http://127.0.0.1:9090/blog/articles/${id}`, {
      cache: "no-store",
    });

    if (!res.ok) {
      throw new Error("Failed to fetch article");
    }

    const articleData = await res.json();
    const article = articleData.data
    console.log("article detail:", article);


    return (
      <div className="right">
        <div className="date">
          {new Date(article.create_time).toLocaleDateString("zh-CN")}
        </div>
        {/* 标签 */}
        <div className="tags">
          {article.tags.map((tag: string) => (
            <div key={tag}>{tag}</div>
          ))}
        </div>
        <header className="head">
          <h1>
            {article.title}
          </h1>
        </header>
        {/* 文章内容 */}
        <div
          className="post-content"
          dangerouslySetInnerHTML={{ __html: article.content }}
        ></div>

        {/* 文章底部 */}
        <div className="post-footer">
          <a
            href="/"
            className=""
          >
            ← 返回首页
          </a>
        </div>
      </div>
    );
  } catch (error: any) {
    return (
      <div className="">
        <h2 className="">
          文章加载失败
        </h2>
        <p className="">
          {error.message}
        </p>
        <a
          href="/"
          className=""
        >
          返回首页
        </a>
      </div>
    );
  }
}